<template>
  <div class="container_warp">
    <div class="header flex items-center gap-4 mb-4 flex-wrap">
      <div class="title">社群矩阵</div>
    </div>

    <div class="group">
      <div class="group-title">QQ群</div>
      <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        <div class="card" v-for="item in qqList" :key="item.name">
          <img class="qrcode" :src="normalizeSrc(item.qrcode)" alt="" @error="onImgError($event)" />
          <div class="name">{{ item.name }} <span class="state">（{{ isFull(item) ? '满员' : '可加入' }}）</span></div>
          <div class="desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>

    <div class="group">
      <div class="group-title">微信群</div>
      <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        <div class="card" v-for="item in wxList" :key="item.name">
          <img class="qrcode" :src="normalizeSrc(item.qrcode)" alt="" @error="onImgError($event)" />
          <div class="name">{{ item.name }} <span class="state">（{{ isFull(item) ? '满员' : '可加入' }}）</span></div>
          <div class="desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>

    <div class="group">
      <div class="group-title">企微群</div>
      <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        <div class="card" v-for="item in qywxList" :key="item.name">
          <img class="qrcode" :src="normalizeSrc(item.qrcode)" alt="" @error="onImgError($event)" />
          <div class="name">{{ item.name }} <span class="state">（{{ isFull(item) ? '满员' : '可加入' }}）</span></div>
          <div class="desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'CommunityIndex' })

type GroupItem = { name: string; desc?: string; qrcode: string; group?: 'qq' | 'wx' | 'qywx'; sort?: number | string; state?: string }
import allCommunity from '../Data/community.json'

const lan = useCookie('lang').value || 'zh'
const communityRaw: any = (allCommunity as any)[lan] || (allCommunity as any).zh || []
const communityList: GroupItem[] = (Array.isArray(communityRaw) ? communityRaw : Object.values(communityRaw || {}).flat())
  .sort((a: GroupItem, b: GroupItem) => Number(b.sort ?? 0) - Number(a.sort ?? 0))

const qqList = ref<GroupItem[]>(communityList.filter(i => (i.group || '').toLowerCase() === 'qq'))
const wxList = ref<GroupItem[]>(communityList.filter(i => (i.group || '').toLowerCase() === 'wx'))
const qywxList = ref<GroupItem[]>(communityList.filter(i => (i.group || '').toLowerCase() === 'qywx'))

function isFull(item: GroupItem) {
  const v = String(item.state ?? '').toLowerCase()
  return v === 'full' || v === '满员' || v === '1' || v === 'true'
}

function normalizeSrc(src: string) {
  if (!src) return '/default-ebook-cover.png'
  // 将 /public/ 前缀改为根路径
  if (src.startsWith('/public/')) return src.replace('/public/', '/')
  // 相对文件名补全为根路径
  if (!src.startsWith('/')) return `/${src}`
  return src
}

function onImgError(e: Event) {
  const target = e.target as HTMLImageElement
  if (target && target.src !== location.origin + '/default-ebook-cover.png')
    target.src = '/default-ebook-cover.png'
}

useSeoMeta({
  title: '社群矩阵 - GitCode开源共创中心',
})
</script>

<style scoped lang="scss">
.container_warp { max-width: 1200px; margin: 0 auto; }
.grid {
    letter-spacing: 0em;
    word-spacing: 0em;
}
.title {
  background: linear-gradient(90deg, #2951E0 0%, #8A25D9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #0000;
  font-weight: 600; font-size: 20px;
}
.group { margin-bottom: 24px; }
.group-title { font-weight: 600; margin: 8px 0; }
.card { border: 1px solid #E3E3EE; border-radius: 8px; padding: 12px; background: #fff; }
.qrcode { width: 100%; height: 220px; object-fit: contain; background: #fafafa; display: block; }
.name { font-weight: 600; margin-top: 8px; line-height: 22px; word-break: break-word; }
.desc { color: #707A87; font-size: 12px; line-height: 18px; }
</style>


